<template>
  <el-row justify="center">
    <el-col>
      <el-form :inline="true" :model="formInline" size="small">
        <el-form-item label="关键检索">
          <el-input v-model="formInline.keyword" style="width: 215px" placeholder="关键检索"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="clickSelect">查询</el-button>
          <el-button type="primary" @click="add">添加</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col style="min-height: 500px">
      <el-container>
        <el-aside>
          <vxe-table
              height="590px"
              ref="xTree1"
              @checkbox-change="orgChange"
              show-overflow
              row-key
              :row-config="{isHover: true}"
              :show-header="false"
              :data="tableData"
              :checkbox-config="{labelField: 'orgName'}"
              :tree-config="{transform: true, accordion: true, line: true, iconOpen: 'fa fa-caret-down', iconClose: 'fa fa-caret-right'}">
            <vxe-column type="checkbox" tree-node></vxe-column>
          </vxe-table>
        </el-aside>

        <el-main style="padding: 0 15px">
          <vxe-table
              :data="tableData2"
              :row-config="{isHover: true}"
              :header-cell-style="{'text-align':'center'}"
              :stripe="true"
              border>
            <vxe-column type="seq" width="60"></vxe-column>
            <vxe-column field="loginName" title="账号"></vxe-column>
            <vxe-column field="userName" title="名称"></vxe-column>
            <vxe-column field="realName" title="真实姓名"></vxe-column>
            <vxe-column field="phone" title="电话"></vxe-column>
            <vxe-column field="email" title="邮箱"></vxe-column>
            <vxe-column title="操作" width="150">
              <template #default="{ row }">
                <el-button type="primary" size="mini" @click="edit(row)" style="margin-right: 15px">编辑</el-button>
                <el-popconfirm
                    title="确定删除吗？" @confirm="del(row)">
                  <el-button type="danger" size="mini" slot="reference">删除</el-button>
                </el-popconfirm>
              </template>
            </vxe-column>
          </vxe-table>
          <!-- 分页-->
          <p style="text-align: right">
            <vxe-pager
                :current-page="page.currentPage"
                :page-size="page.pageSize"
                :total="page.total"
                :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                @page-change="handlePageChange">
            </vxe-pager>
          </p>
        </el-main>
      </el-container>
    </el-col>
  </el-row>
</template>
<script>

import {orgList} from '@/api/operations-center/org'
import {userPage, removeUser} from '@/api/operations-center/user'

export default {
  name: "UserList",
  data() {
    return {
      // 分页
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      formInline: {
        keyword: '',
      },
      tableData: [],
      tableData2: []
    }
  },
  methods: {
    /**
     * {查询组织机构列表}
     *
     * @author: 宋康
     * @date: 2022/8/22 13:39
     */
    queryOrgList() {
      orgList('', false, []).then(res => {
        this.tableData = res.data;
      })
    },
    /**
     * {获取用户分页}
     *
     * @author: 宋康
     * @date: 2022/8/22 13:50
     */
    queryUserPage() {
      if (this.$store.state.Authentication.access_token) {
        userPage(this.page.currentPage, this.page.pageSize, this.formInline.keyword, this.getTreeData('xTree1')).then(res => {
          if (res.status) {
            let data = res.data;
            this.page.total = data.total;
            this.tableData2 = data.records;
          }
        })
      } else {
        this.$XModal.confirm('未检测到登录信息，是否跳转登录？').then(type => {
          if ('confirm' === type) {
            this._toLogin();
          }
        })
      }
    },
    /**
     * {点击分页触发}
     *
     * @author: 宋康
     * @date: 2022/8/22 14:06
     */
    handlePageChange({currentPage, pageSize}) {
      this.page.currentPage = currentPage
      this.page.pageSize = pageSize
      this.queryUserPage()
    },
    /**
     * {组织机构手动勾选触发}
     *
     * @author: 宋康
     * @date: 2023/2/10
     */
    orgChange() {
      this._debounce(() => this.clickSelect(), 500);
    },
    /**
     * {点击查询触发}
     *
     * @author: 宋康
     * @date: 2022/8/22 14:08
     */
    clickSelect() {
      this.page.currentPage = 1
      this.queryUserPage()
    },
    /**
     * {获取表格选中数据}
     *
     * @author: 宋康
     * @date: 2022/8/22 14:02
     */
    getTreeData(treeName) {
      let checkboxData = [];
      // 全选
      let entirely = this.$refs[treeName].getCheckboxRecords();
      if (entirely.length > 0) {
        for (let p of entirely) {
          checkboxData.push(p.id);
        }
        // 半选
        let Indeterminate = this.$refs[treeName].getCheckboxIndeterminateRecords();
        if (Indeterminate.length > 0) {
          for (let p of Indeterminate) {
            checkboxData.push(p.id);
          }
        }
      }
      return checkboxData;
    },
    /**
     * {添加}
     *
     * @author: 宋康
     * @date: 2022/8/22 14:14
     */
    add() {
      this.$router.push({
        name: 'UserAdd'
      });
    },
    /**
     * {编辑}
     * @param row
     * @author: 宋康
     * @date: 2022/8/23 08:57
     */
    edit(row) {
      this.$router.push({
        name: 'UserEdit',
        query: {
          id: row.uid
        }
      });
    },
    /**
     * {移除用户}
     * @param row
     * @author: 宋康
     * @date: 2022/8/23 10:34
     */
    del(row) {
      this.$alert(`确定删除【${row.userName}】吗？`, '提示', {
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeUser(row.uid).then(res => {
          if (res.status) {
            this.$XModal.alert({
              content: '删除成功',
              status: 'success',
            }).then(() => {
              this.clickSelect();
            })
          } else {
            this.$XModal.alert({
              content: res['msg'],
              status: 'error',
            })
          }
        })
      }).catch(() => {
      });
    },
  },
  mounted() {
    this.queryOrgList();
    this.queryUserPage();
  }
}
</script>
<style lang="scss" scoped>
</style>
